<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索提示</title>
</head>

<body>
    <input id="search" type="text">
    <ul id="list"></ul>
    <script type="module">
        import { getJSON } from './ajax/index.js';
        const url = "https://www.imooc.com/api/http/search/suggest?words=";
        const xhr = new XMLHttpRequest();
        const search = document.getElementById('search');
        const list = document.getElementById('list');
        let html = ''
        let time=null;
        const gu=()=>{
            if (search.value.trim() !== '') {
                getJSON(`${url}${search.value}`).then((response) => {
                    console.log(response)
                    for (const item of response.data) {
                        html += `<li>${item.word}</li>`;
                    }
                    list.style.display='';
                    list.innerHTML = html;
                })
            }else{
                list.style.display='none'
            }
        }
        search.addEventListener('input', () => {
           if(time){
            clearTimeout(time);
           }
           time=setTimeout(gu,500)
        }, false)
    </script>
</body>

</html>